<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Canvas For All</title>
</head>
<body>
	<!-- #Página -->
	<div data-role="page" id="canvas" data-title="Canvas For All">
		<!-- Cabeçalho -->
		<div data-role="header" id="appHeader" data-position="fixed">
			<a data-inline="true" class="icon icon-back" data-iconpos="notext">Menu</a>
			<h1></h1>
		</div>
		<!-- /Fim do cabeçalho -->

		<!-- #Conteúdo -->
		<div id="canvas" class="main" data-role="content">
			<!-- #Quadrantes -->

			<div class="column x1">
				<div id="q_1" class="quadrants justification">
					<a href="#info_quadrante1" data-transition="flip" id="popup" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 78%;">Sobre</a>
				</div>

				<div id="q_2" class="quadrants obj">
					<a href="#info_quadrante2" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 78%;">Sobre</a>
				</div>
				<div id="q_3" class="quadrants benefits">
					<a href="#info_quadrante3" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 90%;">Sobre</a>
				</div>
			</div>
			<div class="column x1">
				<div id="q_4" class="quadrants products">
					<a href="#info_quadrante4" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 78%;">Sobre</a>
				</div>
				<div id="q_5" class="quadrants requirements">
					<a href="#info_quadrante5" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 93%;">Sobre</a>
				</div>
			</div>
			<div class="column x2">
				<div class="column x4">
					<div id="q_6" class="quadrants stakeholders">
						<a href="#info_quadrante6" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
							style="top: 85%;">Sobre</a>
					</div>
					<div id="q_7" class="quadrants team">
						<a href="#info_quadrante7" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
							style="top: 87%;">Sobre</a>
					</div>
				</div>
				<div class="column x4">
					<div id="q_9" class="quadrants assumptions">
						<a href="#info_quadrante8" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
							style="top: 84%;">Sobre</a>
					</div>
					<div id="q_10" class="quadrants groups">
						<a href="#info_quadrante9" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
							style="top: 86%;">Sobre</a>
					</div>
				</div>
				<div id="q_8" class="quadrants restrictions">
					<a href="#info_quadrante13" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 82%;">Sobre</a>
				</div>
			</div>
			<div class="column x1">
				<div id="q_11" class="quadrants risks">
					<a href="#info_quadrante10" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 84%;">Sobre</a>
				</div>
				<div id="q_12" class="quadrants timeline">
					<a href="#info_quadrante11" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 84%;">Sobre</a>
				</div>
				<div id="q_13" class="quadrants costs">
					<a href="#info_quadrante12" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="question" data-iconpos="notext" data-shadow="false" class="q_info"
						style="top: 82%;">Sobre</a>
				</div>
			</div>
			<!-- /Fim dos quadrantes -->
		</div>
		<!-- Início Tips -->

		<div data-role="popup" id="info_quadrante1">
			<p>Quais são as razões para realização do projeto?</p>
		</div>

		<div data-role="popup" id="info_quadrante2">
			<p>
				Objetivo é algo detalhado e concreto que <br /> define o que o projeto está a<br /> tentar atingir para a organização<br /> em termos Specific (especificos), Measurable <br /> (mensuráveis),
				Attainable (atingíveis), <br /> Realistics (realistas) e <br /> Time Bound (temporizáveis).
			</p>
		</div>

		<div data-role="popup" id="info_quadrante3">
			<p>Relação de melhorias esperadas com a realização do projeto.</p>
		</div>

		<div data-role="popup" id="info_quadrante4">
			<p>Resultado final esperado com o conclusão do projeto.</p>
		</div>

		<div data-role="popup" id="info_quadrante5">
			<p>As capacidades que são requeridas e que devem ser entregues com a realização do projeto.</p>
		</div>

		<div data-role="popup" id="info_quadrante6">
			<p>Partes interessadas que serão influenciadas pelo projeto.</p>
		</div>

		<div data-role="popup" id="info_quadrante7">
			<p>Pessoas ou perfis profissionais necessários ao projeto</p>
		</div>

		<div data-role="popup" id="info_quadrante8">
			<p>Situações verdadeiras que devem ser consideradas pela gestão do projeto.</p>
		</div>

		<div data-role="popup" id="info_quadrante9">
			<p>Subprodutos do projeto. Muito importante para controle das etapas intermediárias de trabalho.</p>
		</div>

		<div data-role="popup" id="info_quadrante10">
			<p>Eventos que podem afetar de forma positiva ou negativa o projeto.</p>
		</div>
		<div data-role="popup" id="info_quadrante11">
			<p>Macro distribuição do grupo de entregas ao longo do tempo.</p>
		</div>
		<div data-role="popup" id="info_quadrante12">
			<p>Pode ser o custo total do projeto ou detalhado por grupo de entregas.</p>
		</div>
		<div data-role="popup" id="info_quadrante13">
			<p>Fatores limitadores do projeto. Podem reduzir a velocidade do trabalho.</p>
		</div>

		<!-- Fim Tips -->

		<!-- /Fim do conteúdo -->

		<!-- Menu cores e exclusão -->
		<div data-role="popup" id="popupMenu">
			<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-btn-right">Close</a>
			<div data-role="header">
				<h2>Escolha sua opção:</h2>
			</div>
			<div data-rol="content">
				<ul data-role="listview" data-inset="true">
					<li><a href="#" onclick="changeColor('yellow',1)"> <img class="ui-li-icon yellow" /> Amarelo
					</a></li>
					<li><a href="#" onclick="changeColor('blue',2)"> <img class="ui-li-icon blue" /> Azul
					</a></li>
					<li><a href="#" onclick="changeColor('orange',3)"> <img class="ui-li-icon orange" /> Laranja
					</a></li>
					<li><a href="#" onclick="deletePostit()" data-role="button" data-icon="delete" data-iconpos="left"> Deletar </a></li>
				</ul>
			</div>
		</div>

	</div>
	<!-- /Fim da página -->
</body>
</html>